<template>
	<view class="vote">
		<image class="vote-bg" src="/static/bg.png"></image>
		<view class="vote-header">
			<view class="rule" @tap="showRuleDialog">
				<text>投票须知</text>
			</view>
		</view>
		<view class="vote-container">
			<h3>工衣票选</h3>
			<view class="vote-context">
				<view class="vote-item" v-for="(item,index) in picture" :key="index">
					<view class="vote-item-content" @click="previewImage(item)">
						<view
							style="background-color: #fff;border-radius: 16rpx;box-shadow: 0 1px 6px rgba(255, 255, 255, 1);">
							<view class="img">
								<image :src="item.imgurl" style="width: 100%;" mode="widthFix"></image>
							</view>
							<view class="name">
								<text>{{item.name}}</text>
							</view>
						</view>
					</view>
					<view class="bttn-gradient bttn-md" :class="[item.disable ? 'disable' : 'bttn-success']" @click="voteHandler(item)">投票</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="showRule?'show':''" @tap="hideRuleDialog">
			<view class="cu-dialog rule-dialog">
				<!-- 规则 -->
				<view class="rule-container">
					<view class="title">
						规则说明
					</view>
					<view class="g_item" v-for="(item,index) in rule" :key="index">
						<text class="subTitle">{{item.title}}：</text>
						<view v-for="(num,i) in item.arr" :key="i">
							<text class="condition">{{i + 1}}.{{num}}</text>
						</view>
					</view>
					<view class="tips">
						温馨提示：最终获得票数最高的工衣对应的用户，将被认定为中奖用户。此优惠券仅限本平台下单时无门槛使用。
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showRule: false,
				rule: [{
						title: '投票时间',
						arr: ['本次投票活动自即日起至2025年1月23 日截止']
					},
					{
						title: '投票规则',
						arr: ['每位参与投票的用户，仅有 1 次投票机会', '每次投票时，用户最多可选择 4 个选项进行投票']
					},
					{
						title: '奖品设置',
						arr: ['参与用户：10 元无门槛优惠券 1 张', '中奖用户：50 元无门槛优惠券 1 张']
					},
					{
						title: '开奖时间',
						arr: ['本次投票活动的开奖时间定于 2025 年 1 月 24 日，届时将在貂蝉到家微信公众号及短信通知的形式公布中奖结果']
					},
				],
				picture: [],
				checkDataArr: [],
			}
		},
		onLoad() {
			const userInfo = uni.getStorageSync('userInfo');
			if(!userInfo.token){
				return this.checkLogin()
			}
			// console.log('userInfo', userInfo);
			this.getCloseList().then(()=>{this.checkData()})
		},
		methods: {
			checkLogin() {
				uni.setStorageSync('need2url', 'http://192.168.2.6:5173/active/vote/')
				uni.showModal({
					title: '提示',
					showCancel: false,
					content: '请先登录再操作',
					confirmText: '去登录',
					success: function(res) {
						window.location.href = 'https://app.diaochan88.com/h5/pages/user/login';
					}
				});
			},
			// 检查是否已投票
			checkData(){
				this.$comm.http('/api/gongzhuang/checkdata').then(res => {
					this.picture.forEach((item=>{
						res.data.forEach((check)=>{
							if(item.id === check.pid){
								item.disable = true
							}
						})
					}))
				})
			},
			// 获取工衣
			getCloseList() {
				return new Promise((resovl,reject)=>{
					this.$comm.http('/api/gongzhuang/fzlist').then(res => {
						this.picture = res
						resovl(res) 
					})
				})
			},
			// 点击投票
			voteHandler(item){
				 this.$comm.http('/api/gongzhuang/toupiao', {pid: item.id},'POST')
				 	.then(res => {
						setTimeout(()=>{
							uni.showToast({
								mask:true,
								icon: 'success',
								title: res.msg,
								duration: 2000
							});
						}, 100)
						this.checkData()
				 	}
				)
			},
			previewImage(item) {
				uni.previewImage({
					current: item.imgurl,
					urls: [item.imgurl]
				});
			},
			showRuleDialog() {
				this.showRule = true;
			},
			hideRuleDialog() {
				this.showRule = false;
			}
		}
	}
</script>

<style lang="scss">
	@import url("../../style/btn.css");
	@import url("../../style/index.scss");
</style>